<template>
    <div class="editor-box">
        <quillEditor
            v-model="content.value"
            ref="YXQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"/>
    </div>
</template>

<script>
    import {quillEditor, Quill} from 'vue-quill-editor';

    const sizeStyle = Quill.import('attributors/style/size');
    sizeStyle.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px', '36px'];
    Quill.register(sizeStyle, true);

    const alignStyle = Quill.import('attributors/style/align');
    Quill.register(alignStyle, true);

    export default {
        name: 'Editor',
        props: {
            content: {
                type: Object,
                default: _ => {
                    return {
                        value: '<span style="font-size: 14px;">默认文本</span>'
                    };
                }
            }
        },
        components: {
            quillEditor
        },
        data() {
            return {
                editorOption: {
                    placeholder: '默认文本',
                    modules: {
                        toolbar: [
                            [
                                {'color': []},
                                {'background': []},
                                'bold',
                                'italic',
                                'underline',
                                'strike',
                                {'align': []},
                                {'script': 'sub'},
                                {'script': 'super'},
                                {'size': sizeStyle.whitelist}
                            ]
                        ]
                    }
                }
            };
        },
        methods: {
            onEditorBlur(evt) {
            },
            onEditorFocus(evt) {
            },
            onEditorChange(evt) {
            }
        }
    }
</script>

<style scoped lang="scss">
    .editor-box {

    }
</style>

<style lang="scss">
    @import "../../../../styles/mixin";

    .editor-box {
        .quill-editor {
            width: 280px;

            .ql-toolbar {
                border: none;
                padding: 0 0 8px;

                .ql-formats {
                    margin: 0;
                }
                .ql-size {
                    width: 60px;
                }
            }
            .ql-container {
                height: 120px;
                border-top: 1px solid #cccccc !important;

                .ql-editor {
                    @include scroll-bar;
                }
            }
        }
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]:not([data-value=''])::before {
            content: attr(data-value)
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
            content: attr(data-value);
        }
    }
</style>
